import React, { useEffect, useState } from "react";

import axios from "axios";
import { parseUrlSting, useMount, useDebounce } from "../../utils/index";
import { SearchPannel } from "./search-pannel";
import { List } from "./list";
const apiUrl = process.env.REACT_APP_API_URL;
export const ProjectList = () => {
  const [params, setParams] = useState({
    name: "",
    personId: "",
  });
  const debounceValue = useDebounce(params, 2000);
  const [users, setUsers] = useState([]);
  const [list, setList] = useState([]);
  useEffect(() => {
    axios
      .get(`${apiUrl}/projects`, {
        params: parseUrlSting(debounceValue),
      })
      .then((res) => {
        console.log(res);
        if (res.status === 200) {
          setList(res.data);
        }
      });
  }, [debounceValue]);
  useMount(() => {
    axios.get(`${apiUrl}/users`).then((res) => {
      console.log(res);
      if (res.status === 200) {
        setUsers(res.data);
      }
    });
  });
  return (
    <div>
      <SearchPannel setParams={setParams} params={params} users={users} />
      <List users={users} list={list} />
    </div>
  );
};
